CSS counters are "variables" maintained by CSS whose values can be incremented by CSS rules (to track how many times they are used). Counters let you adjust the appearance of content based on its placement in the document.

CSS counters are like "variables". The variable values can be incremented by CSS rules (which will track how many times they are used).

To work with CSS counters we will use the following properties:

To use a CSS counter, it must first be created with counter-reset.

The following example creates a counter for the page (in the body selector), then increments the counter value for each element and adds "Section :" to the beginning of each element:

h2::before {  counter-increment: section;  content: "Section " counter(section) ": ";}

The following example creates one counter for the page (section) and one counter for each element (subsection). The "section" counter will be counted for each element with "Section .", and the "subsection" counter will be counted for each element with ".":

h1 {  counter-reset: subsection;}

h1::before {  counter-increment: section;  content: "Section " counter(section) ". "; }

h2::before {  counter-increment: subsection;  content: counter(section) "." counter(subsection) " ";}

A counter can also be useful to make outlined lists because a new instance of a counter is automatically created in child elements. Here we use the counters() function to insert a string between different levels of nested counters:

li::before {  counter-increment: section;  content: counters(section,".") " ";}